<template>
    <div>
        <Card class="search" shadow>
            <Form :label-width="80" inline>
                <FormItem label="表单名称">
                    <Input v-model="listQuery.name" placeholder="请输入表单名称"/>
                </FormItem>
                <Button type="success" @click="search">搜索</Button>
            </Form>
        </Card>
        <Card shadow>
            <div class="tb-header">
                <RefreshButton :refreshList="getTableData"></RefreshButton>
                <Button type="primary" size="small" icon="md-add" style="margin-right: 5px" @click="add">新增</Button>
            </div>

            <Table :height="400" size="small" :columns="columns" :data="tableData">
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
                    <Button disabled type="error" size="small" style="margin-right: 5px">删除</Button>
                </template>
            </Table>

            <Pagination
                    ref="pagination"
                    size="small"
                    :sizer="true"
                    :page.sync="listQuery.pageNumber"
                    :rows.sync="listQuery.pageSize"
                    :total="total"
                    @on-change="getTableData"/>
        </Card>

        <Modal v-model="showForm" title="表单">
            <k-form-build :value="jsonData"/>
        </Modal>
    </div>
</template>

<script>
    import {findPage} from '@/api/form';
    import Pagination from '../components/Pagination' // 分页插件
    import RefreshButton from '../components/RefreshButton' // 分页插件

    export default {
        name: "DesignForm",
        components: {
            Pagination, RefreshButton
        },
        data() {
            return {
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '内容',
                        key: 'text',
                        render: (h, params) => {
                            return h('span', {
                                attrs: {
                                    style: "color:blue"
                                },
                                on: {
                                    click: () => {
                                        this.check(params.row)
                                    }
                                }
                            }, "查看")
                        }
                    },
                    {
                        title: '描述',
                        key: 'description'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h, params) => {
                            return h('span', params.row.status == '0' ? '禁用' : '启用')
                        }
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 200,
                        align: 'center'
                    }
                ],
                tableData: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10,
                    name: "",
                },
                total: 0,
                showForm: false,
                jsonData: {}
            }
        },
        created() {
            this.getTableData();
        },
        methods: {
            async getTableData() {
                this.tableData = [];
                this.total = 0;
                let params = this.listQuery
                let res = await findPage(params);
                if (res.success) {
                    this.tableData = res.result.records;
                    this.total = res.result.total;
                }
            },
            add() {
                this.$router.push({path: "/editform"})
            },
            check(row) {
                let text = JSON.parse(row.text);
                this.showForm = true;
                this.jsonData = text;
            },
            edit(row) {
                this.$router.push({path: "/editform", query: row})
            },
            search(){
                this.getTableData()
            }
        }
    }
</script>

<style scoped>

</style>
